<script setup>
defineProps(['word', 'wordArray'])
//5个随机色
const colorMap = [
  {
    backgroundColor: '#FFCA4244'
  },
  {
    backgroundColor: '#88FF4244'
  },
  {
    backgroundColor: '#42FF9C44'
  },
  {
    backgroundColor: '#4274FF44'
  },
  {
    backgroundColor: '#FF42CD44'
  }
]

const colorIndex = Math.floor(Math.random() * 5)
const backgroundColor = colorMap[colorIndex].backgroundColor
const boxShadow = `0px 2px 7px -1px ${colorMap[colorIndex].backgroundColor}`;

</script>
<template>
  <div class="typed-in-box" :style="{ backgroundColor, boxShadow }">
    <h4 class="inside-word">{{ word }}</h4>
    <h4 class="inside-word">{{ wordArray[0].type }}</h4>
    <h4 class="inside-word">{{ wordArray[0].translation }}</h4>
  </div>
</template>
<style scoped lang="scss">
.typed-in-box {
  position: relative;
  height: 10vh;
  width: 22.3vw;
  left: 1vw;
  margin-top: 2vh;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  align-items: center;
  box-shadow: #000000 0px 2px 7px -5px;
}

.inside-word {
  position: relative;
  font-size: 1.1rem;

  &:nth-child(1) {
    left: 5%;
    min-width: 20%;
    width: auto;
    max-width: 40%;
  }

  &:nth-child(2) {
    left: 9%;
    width: 12%;
  }

  &:nth-child(3) {
    left: 20%;
    width: 30%;
  }
}
</style>
